<template>
  <image
    :src="realSrc || localSrc"
    :mode="mode"
    :webp="webp"
    :lazy-load="lazyLoad"
    :showMenuByLongpress="lazyLoad"
    @bindload="handleLoad"
    @binderror="handleError"
    :style="[
      width ? 'width: ' + width + ';' : '',
      height ? 'height: ' + height + ';' : '',
      borderRadius ? 'border-radius:' + borderRadius + ';' : '',
    ]"
    class="img-class"
  />
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      value: "",
    },
    mode: {
      type: String,
      value: "scaleToFill",
    },
    localSrc: {
      type: String,
      value: "",
    },
    webp: {
      type: Boolean,
      value: false,
    },
    lazyLoad: {
      type: Boolean,
      value: false,
    },
    showMenuByLongpress: {
      type: Boolean,
      value: false,
    },
    height: {
      type: String,
      value: "",
    },
    width: {
      type: String,
      value: "",
    },
    borderRadius: {
      type: String,
      value: "",
    },
    cdn: {
      type: Boolean,
      value: false,
    },
    quality: {
      type: String,
      value: 90,
    },
  },
  created() {
    this.changeUrl(this.src);
  },
  data() {
    return {
      realSrc: "",
    };
  },
  watch: {
    src: {
      handler(newVal) {
        this.changeUrl(newVal);
      },
    },
  },
  methods: {
    changeUrl(value) {
      if (value) {
        let imgUrl = this.$myTool.toFullUrl(value);
        // console.log(imgUrl)
        if (this.cdn && this.width) {
          let width = this.width;
          let quality = this.quality;
          width = width.replace("rpx", "");
          width = width.replace("px", "");
          imgUrl =
            imgUrl +
            "?x-oss-process=image/resize,w_" +
            width +
            ",m_lfit/quality,q_" +
            quality;
        }
        this.realSrc = imgUrl;
      } else {
        this.ealSrc = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.img-class {
  width: 100%;
  height: 100%;
}
</style>
